<!--
 * @author: sanbao
 * @Date: 2022-09-05 15:52:40
-->
<style lang='scss' scoped>
#echarts3 {
  width: 100%;
  height: 100%;
}
</style>

<template>
  <div id="echarts3"></div>
</template>

<script>
import { ref, reactive, toRefs, computed, onMounted } from "vue";
import { a } from "../api/index";
export default {
  components: {},
  setup() {
    onMounted(() => {
      getdocument();
    });
    const getdocument = async () => {
      let myChart = echarts.init(document.getElementById("echarts3"));
      var metaDate = [[], [], [], [], []];
      var xAxisData = [];
      const response = await a;
      response.continentStatis.forEach((v) => {
        xAxisData.push(v.date);

        //    onsole.log(v) }
        for (let q in v.statis) {
          if (q == "亚洲") {
            metaDate[0].push(v.statis[q]);
          }
          if (q == "北美洲") {
            metaDate[1].push(v.statis[q]);
          }
          if (q == "大洋洲") {
            metaDate[2].push(v.statis[q]);
          }
          if (q == "欧洲") {
            metaDate[3].push(v.statis[q]);
          }
          if (q == "其他") {
            metaDate[4].push(v.statis[q]);
          }
        }
      });
      var legendData = ["亚洲", "北美洲", "大洋洲", "欧洲", "其他"];
      var serieData = [];

      for (var v = 0; v < legendData.length; v++) {
        var serie = {
          name: legendData[v],
          type: "line",
          symbol: "circle",
          symbolSize: 10,
          data: metaDate[v],
        };
        serieData.push(serie);
      }
      var colors = ["#036BC8", "#4A95FF", "#5EBEFC", "#2EF7F3", "#FFFFFF"];
      myChart.setOption({
        legend: {
          show: true,
          left: "center",
          data: legendData,
          y: "2%",
          itemWidth: 18,
          itemHeight: 12,
          textStyle: { color: "#fff", fontSize: 14 },
        },
        color: colors,
        grid: {
          left: "2%",
          top: "20%",
          bottom: "2%",
          right: "5%",
          containLabel: true,
        },
        tooltip: { trigger: "axis", axisPointer: { type: "shadow" } },
        xAxis: [
          {
            type: "category",
            axisLine: { show: true, lineStyle: { color: "#6173A3" } },
            axisLabel: {
              textStyle: { color: "#9ea7c4", fontSize: 14 },
            },
            axisTick: { show: false },
            data: xAxisData,
          },
        ],
        yAxis: [
          {
            axisTick: { show: false },
            splitLine: { show: false },
            axisLabel: {
              textStyle: { color: "#9ea7c4", fontSize: 14 },
            },
            axisLine: { show: true, lineStyle: { color: "#6173A3" } },
          },
        ],
        series: serieData,
      });
      window.onresize = function () {
        myChart.resize();
      };
    };
    return {};
  },
};
</script>